
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'

interface iList{
    list:string[],
    inputValue:string
}

export default class App extends Component {

    state:iList = {
        list:[],
        inputValue:''
    }

    handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({
            inputValue: e.target.value
        });
    };

    handleAddItem = () => {
        if (this.state.inputValue) {
            this.setState({
                list: [...this.state.list, this.state.inputValue],
                inputValue: '' 
            });
        }
    };
    render() {
        return <>
            <span>
               <input type="text" placeholder="请输入内容" 
               value={this.state.inputValue} 
               onChange={this.handleInputChange} 
               />
               <button onClick={this.handleAddItem}>加入</button>
            </span>
            {this.state.list.map((item,index)=>{ 
                return <span key={index}>
                    <span className="list">{item}</span>
                    <button onClick={()=>{
                        const newList = [...this.state.list];
                        newList.splice(index, 1);
                        this.setState({ list: newList });
                    }}>删除</button>
                </span>
            })}
        </>
    }
}